<template>
    <div class="app">
        <top></top>
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="username" label="用户名"  placeholder="请输入用户名或手机号"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />

            <van-field v-model="vercode" center clearable label="短信验证码" placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" native-type="button" :disabled="end" @click="send">{{code_send}}</van-button>
                </template>
            </van-field>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
            <h5 @click=" $router.push('/login') "  style="color: blue;">如果已有账号点击此处跳转登录</h5>
        </van-form>
        <tabars></tabars>
    </div>
</template>
<script>
import { getLine } from '@/api/home.js'
import tabars from '@/components/bottom'
import top from '@/components/top'
export default {
    name: 'issue',
    components: {
        [tabars.name]: tabars,
        [top.name]:top

    },
    data() {
        return {
            username: '',
            password: '',
            vercode: '',
            code_send:'发送验证码',
            end:false,
        
        };
    },
    
    mounted() {
    },
    created() {
      
    },
    methods: {
        onSubmit(values) {
            console.log('submit', values);
        this.getdl()

        },
    send(){
            
            this.end=true
        let n=10
     var timer= setInterval(() => {
      

       n--
     this.code_send=`${n}s后再次发送`
     if(n==0){
       this.code_send='再次发送'
       this.end=false
        clearInterval(timer)
        
     }
     }, 1000);


  getLine('/user/sendSms',{ mobile: this.username, type: 'register' }).then(res => {
            console.log(res)
        })
        },
        getdl() {
            let { username, password, vercode } = this
            getLine('/user/reg', { password, username, vercode }).then(res => {
                console.log(res)
              
                if(res.code==0){
                      let {token}=res
                    localStorage.setItem('dw-token',token)
                 
                }
            })
        },


    },
}
</script>
<style>

</style>